<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-table highlight-current-row  ref="feedbackTable" v-loading="loading" :data="feedbacks" :stripe=true :row-key="'id'" :max-height="clientHeight" :height="clientHeight" @selection-change="handleTableChange">
         
          <el-table-column prop="" label="">
            <template slot-scope="scope">
              <el-card :body-style="{ padding: '0px' }">
                <div style="padding: 14px;">
                  <span class="card-head" style="color:#ff770F;" v-if="scope.row.phone.length ===0">{{scope.row.openid}}</span>
                  <span class="card-head" style="color:#ff770F;" v-else>{{scope.row.openid}}，联系方式:{{scope.row.phone}}</span>
                  <div>
                    <time class="time">发表于 {{scope.row.createTime}}</time>
                    <time class="time">{{scope.row.parkfield}}</time>
                  </div>
                  <div style="margin-top:10px;">
                    <time class="card-text">{{scope.row.feedbackcontent}}</time>
                  </div>
                </div>
              </el-card>
            </template>
          </el-table-column>
          
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="page-tool">
        <el-pagination layout="total,sizes,prev, pager,next,jumper" :page-size="pageSize" :total="total" :page-sizes="[10, 20, 30, 40, 100]" @size-change="handlePageChange" @current-change="handleNoChange">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  loadFeedbackApi,
} from "../../api/lcFeedback.js";
import { getNickName, getTestUserName, getRoleId } from "../../util/auth";
 
export default {
  name: "runInfo",
  data: function () {
    return {
      clientHeight:
        Math.max(
          document.documentElement.scrollHeight,
          document.body.scrollHeight
        ) -
        132 -
        5 +
        10 -
        28,
      labelWidth: "100px",
      loading: false,
      dialogTitle: "",
      pageNo: 1,
      pageSize: 20,
      total: 0,
      multipleSelection: [],
      feedbacks: [],
      roleIndex: true,

    };
  },
  methods: {
    handlePageChange (pageSize) {
      this.pageSize = pageSize;
      this.loadFeedback(this.pageNo, this.pageSize);
    },
    handleNoChange (pageNo) {
      this.pageNo = pageNo;
      this.loadFeedback(this.pageNo, this.pageSize);
    },
    handleTableChange (val) {
      this.multipleSelection = val;
    },
    loadFeedback (pageNo, pageSize) {
      let _this = this;
      _this.loading = true;
      loadFeedbackApi(pageNo, pageSize).then(resp => {
        console.log(resp)
        _this.feedbacks = resp.data.dataList;
        console.log(_this.feedbacks)
        _this.total = resp.data.totalNum;
        _this.loading = false;
      });
    },
    
    reload (){
      let _this = this;
      loadFeedbackApi(_this.pageNo, _this.pageSize).then(resp => {
        _this.parkfields = resp.data.dataList;
        _this.total = resp.data.totalNum;
      });
    },
   
  },
  computed: {
    userState () {
      return getNickName() === getTestUserName();
    }
  },
  mounted: function () {
    this.$nextTick(function () {
      this.loadFeedback(this.pageNo, this.pageSize);
      this.roleIndex = getRoleId()==1?false:true;
    });
  },
};
</script>

<style scoped>
.page-tool {
  background:  rgb(237, 231, 231);
}

.page-tool div {
  text-align: right;
}

.lock-btn {
  margin-bottom: 5px;
  margin-top: -10px;
}
.operateBtn {
  font-size: 18px;
  width: 32px;
  height: 32px;
  padding: 0;
}

.card-head {
  color: rgb(42, 26, 182);
}

.time {
  font-size: 10px;
  color: #999;
}
  
.card-text {
  font-size: 18px;
  color: rgb(29, 21, 21);
}
</style>